<!--
 * @Author: weidewei
 * @Date: 2025-05-19 09:09:42
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-21 16:28:08
 * @Description: 
 * @FilePath: \v3\src\views\home\index.vue
-->
<template>
  <div>
    <h2>首页</h2>
    <test-props a="123" b="456" :user-info="userInfo" />
    <test-emit @handle-params="getParams" />
    <h2>通过emit拿到了参数：{{ emitParams }}</h2>
    <test-slot>
        <h3>这是一个默认插槽</h3>
        <!-- <template v-slot:hasName>
            <h3>这是一个具名插槽</h3>
        </template> -->
        <template #hasName>
            <h3>这是一个具名插槽</h3>
        </template>
        <template #scopeSlot="scoped">
            <h1>这是一个作用域的插槽：{{ scoped }}</h1>
        </template>
    </test-slot>
    <div class="section">
        <test-ref ref="refTest"/>
        <button style="margin-top: 10px;" @click="getRef">点击获取组件实例</button>
    </div>
    <keep-alive>
      <test-life-cycle v-if="show" :a="34"></test-life-cycle>
    </keep-alive>
    <button @click="show = !show">卸载/挂载组件</button>
    <test-event-bus>
      {{ eventBusVal }}
    </test-event-bus>
    <test-pinia></test-pinia>
    <test-provide-inject></test-provide-inject>
  </div>
</template>
<script lang="ts" setup>
import { 
  reactive,
  defineAsyncComponent,
  ref,
  onErrorCaptured,
  getCurrentInstance,
  onUnmounted,
  provide 
} from "vue";
import TestProps from "./components/TestProps.vue";
const TestEmit = defineAsyncComponent(()=>import("./components/TestEmit.vue"));
const TestSlot = defineAsyncComponent(()=>import("./components/TestSlot.vue"));
const TestRef = defineAsyncComponent(()=>import("./components/TestRef.vue"));
const TestLifeCycle = defineAsyncComponent(()=>import("./components/TestLifeCycle.vue"));
const TestEventBus = defineAsyncComponent(()=>import("./components/TestEventBus.vue"));
const TestPinia = defineAsyncComponent(()=>import("./components/TestPinia.vue"));
const TestProvideInject = defineAsyncComponent(()=>import("./components/TestProvideInject.vue"));
const refTest = ref();
const show = ref(true);
const eventBusVal = ref(null);
const { proxy } = getCurrentInstance()!
const userInfo = reactive({
  name: "张三",
  age: 18,
  gender: "男"
});
let emitParams = ref(null);
function getParams(data) {
  console.log("data",data)
  emitParams.value = data
  // console.log(emitParams)
}

function getRef() {
    // console.log(refTest.value)
    console.log("rnum",refTest.value?.num)
}

proxy.$bus.on('eventBus',function(val){
  // console.log('val',val)
  eventBusVal.value = val
})

onUnmounted(()=>{
  proxy.$bus.off('eventBus')
})

provide("default")

provide('test', '这是一个测试数据')

provide("fnObj",()=>{
  return {
    fn1: getRef,
    fn2: ()=>{
      console.log('fn2')
      return "fn2"
    }
  }
})


// 捕获了后代组件传递的错误时调用
onErrorCaptured((err, instance, info) => {
  console.log('err',err) // 报错信息
  console.log('instance',instance) // 触发该错误的组件实例
  console.log('info',info) // 说明错误来源的字符串
});
</script>

